<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/vue-2.6.12.js"></script>
</head>
<body>

<div id="app">
	
	add todo <input type="text" v-model="newTodo"> <br>
	
	<button type="button" @click="addTodo">添加</button>
	
	<hr>
	
	<ul>
		<li v-for="(item,index) in todos" :key="index">{{item}} <button type="button" @click="remove(index)">完成</button></li>
	</ul>
	
</div>


<script>
	
	let app = new Vue({
	  
	  el:"#app",
	  data:{
	    newTodo:"",
	    todos:["123"]
	  },
	  methods:{
	    
	    addTodo(){
	      if (this.newTodo.trim().length>0){
	        
	        this.todos.push(this.newTodo);
	        
	      }
	      
	      this.newTodo = "";
	      
	    },
	    remove(i){
	    
	      this.todos.splice(i,1)
	    
	    
	    }
	    
	  }
	  
	})
	
</script>
</body>
</html>